<template>
  <div class="permission-selector">
    <div class="permission-header">
      <h3>权限设置</h3>
      <div class="quick-actions">
        <el-button size="small" @click="selectAll">全选</el-button>
        <el-button size="small" @click="clearAll">清空</el-button>
      </div>
    </div>

    <div class="permission-content">
      <div v-for="group in permissionGroups" :key="group.key" class="permission-group">
        <div class="group-header">
          <el-checkbox :model-value="isGroupSelected(group)" :indeterminate="isGroupIndeterminate(group)"
            @change="toggleGroup(group, $event)">
            <span class="group-title">{{ group.label }}</span>
          </el-checkbox>
        </div>

        <div class="group-permissions">
          <el-checkbox v-for="permission in group.permissions" :key="permission.value"
            :model-value="selectedPermissions.includes(permission.value)"
            @change="togglePermission(permission.value, $event)">
            {{ permission.label }}
          </el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Props
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['update:modelValue'])

// 权限分组配置
const permissionGroups = [
  {
    key: 'user',
    label: '用户管理',
    permissions: [
      { value: 'user:view', label: '查看用户' },
      { value: 'user:edit', label: '编辑用户' },
      { value: 'user:delete', label: '删除用户' },
      { value: 'user:export', label: '导出用户' }
    ]
  },
  {
    key: 'content',
    label: '内容管理',
    permissions: [
      { value: 'content:view', label: '查看内容' },
      { value: 'content:edit', label: '编辑内容' },
      { value: 'content:delete', label: '删除内容' },
      { value: 'content:publish', label: '发布内容' },
      { value: 'content:audit', label: '审核内容' }
    ]
  },
  {
    key: 'system',
    label: '系统管理',
    permissions: [
      { value: 'system:view', label: '查看系统' },
      { value: 'system:edit', label: '编辑系统' },
      { value: 'system:config', label: '系统配置' },
      { value: 'system:log', label: '查看日志' },
      { value: 'system:backup', label: '系统备份' }
    ]
  },
  {
    key: 'report',
    label: '报表管理',
    permissions: [
      { value: 'report:view', label: '查看报表' },
      { value: 'report:export', label: '导出报表' },
      { value: 'report:create', label: '创建报表' }
    ]
  }
]

// 计算属性
const selectedPermissions = computed({
  get() {
    return props.modelValue || []
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

// 检查分组是否全选
const isGroupSelected = (group) => {
  const groupPermissions = group.permissions.map(p => p.value)
  return groupPermissions.length > 0 &&
    groupPermissions.every(p => selectedPermissions.value.includes(p))
}

// 检查分组是否部分选中
const isGroupIndeterminate = (group) => {
  const groupPermissions = group.permissions.map(p => p.value)
  const selectedCount = groupPermissions.filter(p => selectedPermissions.value.includes(p)).length
  return selectedCount > 0 && selectedCount < groupPermissions.length
}

// 方法
const toggleGroup = (group, checked) => {
  const groupPermissions = group.permissions.map(p => p.value)
  let newPermissions = [...selectedPermissions.value]

  if (checked) {
    // 添加整个分组的权限
    groupPermissions.forEach(permission => {
      if (!newPermissions.includes(permission)) {
        newPermissions.push(permission)
      }
    })
  } else {
    // 移除整个分组的权限
    newPermissions = newPermissions.filter(p => !groupPermissions.includes(p))
  }

  selectedPermissions.value = newPermissions
}

const togglePermission = (permission, checked) => {
  let newPermissions = [...selectedPermissions.value]

  if (checked) {
    if (!newPermissions.includes(permission)) {
      newPermissions.push(permission)
    }
  } else {
    newPermissions = newPermissions.filter(p => p !== permission)
  }

  selectedPermissions.value = newPermissions
}

const selectAll = () => {
  const allPermissions = permissionGroups.flatMap(group =>
    group.permissions.map(p => p.value)
  )
  selectedPermissions.value = allPermissions
}

const clearAll = () => {
  selectedPermissions.value = []
}
</script>

<style scoped lang="scss">
.permission-selector {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
}

.permission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;

  h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }

  .quick-actions {
    display: flex;
    gap: 8px;
  }
}

.permission-content {
  max-height: 300px;
  overflow-y: auto;
}

.permission-group {
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.group-header {
  padding: 12px 16px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;

  .group-title {
    font-weight: 600;
    color: #333;
  }

  :deep(.el-checkbox) {
    .el-checkbox__label {
      font-weight: 600;
    }
  }
}

.group-permissions {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 16px;

  :deep(.el-checkbox) {
    margin-right: 0;

    .el-checkbox__label {
      font-size: 13px;
      color: #666;
    }
  }
}

:deep(.el-checkbox) {
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #409eff;
    border-color: #409eff;
  }
}
</style>
